@charset "utf-8";
.banner_container{
	margin:10px 0 0;
	.top_banner{
		float:left;
		width:100%;
		li{
			float:left;
			width:280px;
			position: relative;
			&.center_banner{
				width:580px;
				margin:0 20px;
			}
			a{
				display:inline-block;
				width:100%;
			}
			i{
				position: absolute;
				right:2px;
				bottom:2px;
				width:22px;
				height:12px;
				background:url('../images/icon-ad.png') no-repeat center;
			}
		}
	}
}
.link_container{
	border-bottom:2px solid #1da1f3;
	padding:20px 0;
	h1{
		float:left;
		font-size:25px;
		color:#4a4a4a;
		margin:0;
	}
	.nav_link{
		float:left;
		margin:0 0 0 60px;
		border:1px solid #1da1f3;
		box-sizing:border-box;
		border-radius:3px;
		li{
			float:left;
			border-right:1px solid #1da1f3;
			&:last-child{
				border-right:none;
			}
			a{
				display:inline-block;
				width:80px;
				height:40px;
				color:#1da1f3;
				font-size:16px;
				text-align:center;
				line-height:40px;
				text-decoration:none;
				&.active,&:hover{
					background:#1da1f3;
					color:#fff;
				}
			}
		}
	}
}
.hot_container{
	margin:15px 0 0;
	.pic_focus{
		float:left;
		width:760px;
		overflow:hidden;
		.bd{
			width:760px;
			height:430px;
			overflow:hidden;
			li{
				float:left;
				width:100%;
				vertical-align:middle;
				img{
					width:760px;
					height:430px;
					display:block;
				}
			}
		}
		.hd{
			width:100%;
			padding:10px 0 0;
			overflow:hidden;
			ul{
				float:left;
				margin-right:-10px;
				zoom:1;
				li{
					float:left;
					width:100px;
					height:56px;
					text-align:center;
					margin:0 10px 0 0;
					position: relative;
					cursor:pointer;
					border:2px solid transparent;
					box-sizing:border-box;
					&.on{
						border-color:#1da1f3;
						.cover{
							display:none;
						}
						b{
							display: inline-block;
						}
					}
					img{
						width:96px;
						height:52px;
					}
					.cover{
					    position: absolute;
					    top: 0;
					    left: 0;
					    width: 100%;
					    height: 100%;
					    line-height: 999px;
					    overflow: hidden;
					    font-size: 0;
					    background: #040303;
					    filter: alpha(opacity=30);
					    opacity: .3;
					}
					b{
						position: absolute;
		                top: -8px;
		                left: 50%;
		                margin-left:-6px;
		                border-left: 6px dashed transparent;
		                border-right: 6px dashed transparent;
		                border-top: 0;
		                border-bottom: 6px solid;
		                color: #1da1f3;
		                font-size: 0;
		                width: 0;
		                height: 0;
		                line-height: 0;
		                display:none;
					}
				}
			}
		}
	}
	.forum_item{
		float:left;
		width:400px;
		margin-left:20px;
		.forum_title{
			float:left;
			width:100%;
			font-size:22px;
			color:#000;
		}
		dl{
			float:left;
			width:100%;
			dt{
				float:left;
				width:100%;
				font-size:18px;
				color:#000;
				margin:12px 0 6px;
			}
			dd{
				float:left;
				padding:4px 11px;
				background: #fff;
				border: 1px solid #b6becd;
				border-radius: 100px;
				margin:2px;
				&:hover{
					background:#1da1f2;
					border: 1px solid #1da1f2;
					a,span{
						color:#fff;
					}
				}
				a{
					display:inline-block;
					width:100%;
					font-size: 14px;
					color: #4a4a4a;
					text-decoration:none;
					span{
						font-size: 12px;
						line-height:20px;
						color: #989A9C;
					}
				}
			}
		}
		.search_forum{
			float:left;
			width:100%;
			line-height:40px;
			font-size:16px;
			color:#fff;
			background:#1DA1F2;
			border-radius: 3px;
			text-align:center;
			margin-top:40px;
		}
		.search_ad{
			float:left;
			width:100%;
			margin-top:20px;
			position: relative;
			a{
				float:left;
				width:100%;
				border: 1px solid #EF322A;
				line-height:43px;
				text-align:center;
				font-size: 18px;
				color: #EF322A;
				box-sizing:border-box;
			}
			i{
				position: absolute;
				right:2px;
				bottom:2px;
				width:22px;
				height:12px;
				background:url('../images/icon-ad.png') no-repeat center;
			}
		}
	}
}
.feature_container{
	margin:40px 0 0;
	.feature_item{
		float:left;
		width:100%;
		margin-bottom:10px;
		h3{
			float:left;
			font-size: 32px;
			color: #4A4A4A;
			line-height:45px;
		}
		.feature_nav{
			float:left;
			margin-left:40px;
			li{
				float:left;
				padding:0 20px;
				margin:0 5px;
				&:hover,&.active{
					background: #1DA1F2;
					a{
						color:#fff;
					}
				}
				a{
					font-size: 16px;
					line-height:40px;
					color: #9B9B9B;
					text-decoration:none;
				}
			}
		}
		.feature_more{
			float:right;
			font-size: 14px;
			color: #1DA1F2;
			line-height:40px;
		}
	}
	.feature_list{
		float:left;
		margin:0 -10px;
		.news_item{
			float:left;
			width:280px;
			list-style: none;
			background: #FFFFFF;
			box-sizing:border-box;
			margin:10px;
			.feature_img{
				float:left;
				width:100%;
				height:210px;
				position: relative;
				.feature_info{
					position: absolute;
					left:0;
					bottom:0;
					width:100%;
					.icon_info{
						float:right;
						margin-right:10px;
						font-size:12px;
						color:#fff;
						&.icon_see{
							padding-left:20px;
							background:url('../images/icon-see.png') no-repeat center left;
						}
						&.icon_follow{
							padding-left:15px;
							background:url('../images/icon-follow.png') no-repeat center left;
						}
						&.icon_message{
							padding-left:15px;
							background:url('../images/icon-message.png') no-repeat center left;
						}
					}
				}
			}
			.user_item{
				float:left;
				width:100%;
				padding:0 10px;
				box-sizing:border-box;
				position: relative;
			    border: 1px solid #e2e2e2;
				p{
					font-size: 14px;
					color: #000000;
					line-height: 22px;
					&.user_photo{
						position: absolute;
						top:-25px;
						left:10px;
						background:#fff;
						border-radius:50%;
						overflow:hidden;
						img{
							border-radius:50%;
							box-sizing:border-box;
							padding:4px;
						}
					}
					&.user_name{
						font-size: 14px;
						color: #4A4A4A;
						margin-bottom:15px;
					    padding-left: 70px;
					}
					&.news_title{
						font-size: 14px;
						color: #000;
						margin-bottom:15px;
					}
				}
			}
		}
	}
	.more_btn{
		float:left;
		width:100%;
		margin:20px 0 30px;
		text-align:center;
		span{
			display:inline-block;
			width:220px;
			height:40px;
			line-height:40px;
			font-size: 14px;
			color: #1DA1F2;
			text-align:center;
			background: #FFFFFF;
			border: 1px solid #1DA1F2;
			border-radius: 3px;
			cursor:pointer;
		}
	}
	.like_container{
		float:left;
		width:100%;
		dt{
			float:left;
			width:100%;
			font-size: 32px;
			color: #4a4a4a;
			margin-bottom:20px;
			span{
				display:inline-block;
				font-size:14px;
				color:#1da1f2;
				padding-left:24px;
				margin-left:20px;
			    vertical-align: middle;
			    cursor:pointer;
			    background:url('../images/icon-refresh.png') no-repeat center left;
			}
		}
		dd{
			float:left;
			width:33.333333%;
			box-sizing:border-box;
			padding:0 10px;
			margin-bottom:10px;
			position: relative;
			.icon_order{
				position: absolute;
				top:50%;
				left:0;
				width:6px;
				height:6px;
				margin-top:-3px;
				border-radius:50%;
				background:#32aaf4;
			}
			a{
				font-size: 14px;
				color: #4a4a4a;
			}
		}
	}
	.billing_container{
		float:left;
		width:100%;
		margin:20px 0 30px;
		a,img{
			display:inline-block;
			width:100%;
		}
	}
	.works_container{
		float:left;
		width:100%;
		h3{
			float:left;
			width:100%;
			text-align:left;
			font-size: 32px;
			color: #4a4a4a;
			margin-bottom:20px;
		    font-weight: normal;
		}
		.works_item{
			float:left;
			width:100%;
			.hd{
				float:left;
				width:100%;
				position: relative;
				ul{
					float:left;
					width:100%;
					margin:10px 0;
					text-align:center;
					li{
						display:inline-block;
						width:35px;
						height:4px;
						opacity: 0.2;
						background: #3fc2ff;
						margin:0 4px;
						cursor:pointer;
						text-indent:-999;
						overflow:hidden;
						&.on{
							opacity: 1;
						}
					}
				}
				.prev{
					position: absolute;
					top:50%;
					left:0;
					width:30px;
					height:40px;
					line-height:40px;
					margin-top:-110px;
					background:#fff;
					text-align:center;
				}
				.next{
					position: absolute;
					top:50%;
					right:0;
					width:30px;
					height:40px;
					line-height:40px;
					margin-top:-110px;
					background:#fff;
					text-align:center;
				}
			}
			.bd{
				float:left;
				margin:0 -10px;
				.works_list{
					float:left;
					width:100%;
					li{
						float:left;
						width:220px;
						margin:0 10px;
						.pic_item{
							float:left;
							width:100%;
						}
						.title_item{
							float:left;
							width:100%;
						}
					}
				}
			}
		}
	}
}